<template>  
    <div>  
        <button class="download" @click="downloadPdf">打印PDF</button> 
        <!-- 加载提示 -->  
        <div v-if="isDownloading" class="loading-overlay">  
        <div class="loading-message">正在生成PDF，请稍候...</div>  
        </div> 
        <div ref="content" class="content">  
            <!-- 这里是你要转换为 PDF 的内容 -->  
            <div v-for="(page, index) in 4" :key="index" class="page"> 
            <header>  
                <div class="header-title"><b>健璟体检中心</b></div>
                <div class="header-date">
                    体检日期: {{info.orderCreateTime}}
                </div>
                <hr>  
            </header> 
            <div class="report-container">  
                <!-- 第1页 -->
                <div v-if="index == 0" class="report-info">  
                <h2>健康体检中心</h2>  
                <h1>体    检    报    告</h1>
                <p>姓名: {{ userInfo.patientName }}</p>  
                <p>性别: {{ userInfo.patientSex }}</p>  
                <p>年龄: {{ userInfo.patientAge }}</p>  
                <p>手机号: {{ userInfo.patientPhone }}</p>
                <p>体检编号: {{ info.orderExaminationId }}</p>  
                <p>体检日期: {{ info.orderCreateTime }}</p>  
                </div> 
                <!-- 第2页 -->
                <div v-if="index == 1" class="report-info2">  
                <div class="health-checkup-page">  
                    <div class="info">
                    <p>尊敬的：<span class="placeholder">姓名</span>女士：</p>  
                    <p>感谢您来到<span class="placeholder">健璟体检中心</span>进行健康体检！</p>  
                    <p>为了增加您对健康体检的认识，我们在此特别向您说明，健康体检检查的目的在于及时、全面地了解自身的健康状况，提高健康保健意识。</p>  
                    <p>如果此次检查在正常范围内，只表示您选择的体检项目所反映的身体健康状况。由于体检手段及项目所限，并不能完全排除身体潜在疾病。若有疾病症状出现，请您及时到医院就医。</p>  
                    <p>“健康是人生最宝贵的”。不良的生活习惯和行为会损坏您的健康，我们真诚希望您保持科学健康的生活方式，定期接受健康检查。在您最需要的时候请随时与我们联系。欢迎您再次光临<span class="placeholder">健璟体检中心</span></p>  
                    <p>祝您,健康快乐！</p>
                    </div>  
                </div>   
                </div> 
                <!-- 第3页 -->
                <div class="report-info3" v-if="index == 2">
                <h3>体检项目列表</h3>
                <table border="1">  
                    <thead>  
                    <tr>  
                        <th>序号</th>  
                        <th>项目</th>  
                    </tr>  
                    </thead>  
                    <tbody>  
                    <!-- 使用v-for指令动态生成表格行 -->  
                    <tr v-for="(item, index) in tableData" :key="index">  
                        <td>{{ index + 1 }}</td> <!-- 序号从1开始 -->  
                        <td>{{ item.projectName }}</td> <!-- 项目 -->  
                    </tr> 
                    </tbody>
                </table> 
                </div>
                <!-- 第4页 -->
                <div v-if="index == 3">
                    <h1>体检总结以及建议</h1>
                    <div class="info4">
                        <span style="text-align: left;font-size: 24px;"><b>【综述】</b></span>
                        <div style="margin-top: 10px;" v-for="(item, index) in tableData" :key="index">
                            <span style="text-align: left;"><b>{{index+1}}、{{ item.projectName }}</b></span>
                            <span style="text-align: left;text-indent: 2em">体检结果：{{ item.visitDoctorSummary }}</span>
                            <span style="text-align: left;text-indent: 2em">开的药方：{{ item.visitPrescript }}</span>
                            <span style="text-align: left;text-indent: 2em">体检时间：{{ item.updateTime }}</span>
                        </div>
                        <span style="text-align: left;font-size: 24px;margin-top: 30px;"><b>【建议】</b></span>
                        <span style="text-align: left;margin-top: 10px;">{{ summaryAdvise.visitSummary }}</span>
                        <span style="text-align: left;margin-top: 10px;">————总结时间：{{ summaryAdvise.visitUpdateTime }}</span>
                        <span style="text-align: left;">————总结医生id：{{ summaryAdvise.visitAdminId }}</span>

                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>  
  </template>  
    
  <script>  
  import html2canvas from 'html2canvas';  
  import jsPDF from 'jspdf';  
    
  export default {  
    data() {  
      return {  
        Info:[],
        userInfo: [],
        tableData: [] ,
        result:[],
        summaryAdvise:[],
        isDownloading: false // 控制加载提示的显示和隐藏  
      };  
    },
    created(){
        this.info = JSON.parse(localStorage.getItem("reportInfo"))
        this.getUserInfo();
        this.getProjectName();
        this.summary();
    } , 
    methods: { 
        async downloadPdf() { 
            this.isDownloading = true; // 显示加载提示   
            const content = this.$refs.content;  
            const pageHeight = 992; // A4 纸高度（纵向）  
            const pageWidth = 595; // A4 纸宽度（纵向）  
            const totalPages = 4;  
        
            const pdf = new jsPDF({  
            orientation: 'portrait',  
            unit: 'px',  
            format: [pageWidth, pageHeight],  
            });  
        
            for (let i = 0; i < totalPages; i++) {  
            const pageElement = content.querySelector(`.page:nth-child(${i + 1})`);  
            const canvas = await html2canvas(pageElement, { scale: 2 });  
            const imgData = canvas.toDataURL('image/png');  
            const imgProps = pdf.getImageProperties(imgData);  
            const pdfWidth = pageWidth;  
            const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;  
        
            pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);  
        
            if (i < totalPages - 1) {  
                pdf.addPage();  
            }  
            }  
        
            pdf.save('体检报告单.pdf'); 
            this.isDownloading = false; // 显示加载提示   

        },  
        getUserInfo(){
            this.$axios.get(
                "/patient/getUserInfoById",{
                    params:{
                        patientId:this.info.patientId
                    }
                }
            ).then(res=>{
                this.userInfo = res.data[0]
                console.log("个人信息",this.userInfo)
            })
        },
        getProjectName(){
            this.$axios.get(
                "/patient/getProjectName",{
                    params:{
                        id:this.info.orderExaminationId
                    }
                }
            ).then(res=>{
                console.log(res)
                this.tableData = res.data
            })
        },
        summary(){
            this.$axios.get(
                "/patient/getSummary",{
                    params:{
                        id:this.info.orderExaminationId
                    }
                }
            ).then(res=>{
                console.log(res)
                this.summaryAdvise = res.data[0]
            })
        }
    },  
  };  
  </script>  
    
<style scoped>  
.content {  
    font-size: 20px;
    /* display: flex;   */
    flex-direction: column;  
}  

.page {  
    break-after: always;  
    page-break-after: always;  
    margin-bottom: 20px; /* 确保每页之间有间距 */  
}  
.placeholder {  
    font-style: italic;  
    color: #888;  
/* 可以使用 JavaScript 动态替换这些占位符 */  
} 
/* .report-info2{
    float: left;
} */
.report-info{
    margin-top: 100px;
}
.health-checkup-page {  
    font-family: Arial, sans-serif;  
    margin: 0 auto;  
    padding: 50px;   
    text-align: left;
    text-indent: 2em; 
}  
.info{
    margin-top: 50px;
}
.placeholder {  
    font-style: italic;  
    color: #888;  
    /* 可以使用 JavaScript 动态替换这些占位符 */  
}  

header {  
    text-align: center;  
    margin-top: 20px;  
    font-size: 0.9em;  
    color: #555;  

}  
header hr{
    color: #555;
    width: 95%;
}
.header-title{
    margin-left: 2.5%;
    font-size: 16px;
    float: left;
    margin-bottom: 10px;

}
.header-date{
    margin-right: 2.5%;
    font-size: 12px;
    float: right;
}
.report-info3{
    margin-left: 5%;

}

table {  
    width: 90%;  
    border-collapse: collapse;  

}  

th, td {  
    padding: 8px;  
    text-align: left;  
}  

th {  
    background-color: #b0aeae;  
}  
h1 {
    word-spacing: 10px;
}
.info4{
    padding: 50px;
}
.info4 span{
    display: block;
}
.download{
    margin-right: 5%;
    background-color:rgb(164, 164, 247);
    color:white;
    border: none;
    float: right;
}
.download:hover{
    cursor: pointer;
}
.loading-overlay {  
  position: fixed;  
  top: 0;  
  left: 0;  
  right: 0;  
  bottom: 0;  
  background-color: rgba(0, 0, 0, 0.5);  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  z-index: 1000; /* 确保这个层在其他内容之上 */  
}  
  
.loading-message {  
  color: white;  
  font-size: 16px;  
}
</style>